<template>
  <div class="material-detail-container">
    <el-card class="detail-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <div class="header-content">
            <h2 class="header-title">
              <el-icon class="title-icon"><Box /></el-icon>
              物资详细信息
            </h2>
            <div class="record-id">物资ID: {{ goodsData.materialId }}</div>
          </div>
          <el-button 
            type="primary" 
            plain 
            @click="handleBack" 
            class="back-button"
          >
            <el-icon><ArrowLeft /></el-icon>
            返回列表
          </el-button>
        </div>
      </template>

      <div class="content-wrapper">
        <!-- 基本信息区块 -->
        <div class="info-section">
          <div class="section-header">
            <el-icon><InfoFilled /></el-icon>
            <h3>基本信息</h3>
          </div>
          <el-divider class="custom-divider" />
          <el-descriptions :column="2" border>
            <el-descriptions-item label="物资名称">
              <span class="highlight-text">{{ goodsData.name }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="物资类型">
              <el-tag :type="typeMap[goodsData.type]?.tagType" class="type-tag">
                {{ typeMap[goodsData.type]?.label || '未知类型' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="物资状态">
              <el-tag 
                :type="statusMap[goodsData.status]?.tagType"
                :effect="statusMap[goodsData.status]?.effect"
                class="status-tag"
              >
                {{ statusMap[goodsData.status]?.label || '未知状态' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="负责人">
              <span class="highlight-text">{{ managerName || '未设置' }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <!-- 数量信息区块 -->
        <div class="info-section">
          <div class="section-header">
            <el-icon><DataAnalysis /></el-icon>
            <h3>数量信息</h3>
          </div>
          <el-divider class="custom-divider" />
          <el-descriptions :column="2" border>
            <el-descriptions-item label="库存数量">
              <span class="highlight-text">
                {{ goodsData.quantity }} {{ getQuantityUnit(goodsData.type) }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="警戒值">
              <span class="highlight-text">
                {{ goodsData.minQuantity }} {{ getQuantityUnit(goodsData.type) }}
              </span>
            </el-descriptions-item>
            <el-descriptions-item label="购买单价">
              <span class="highlight-text">{{ goodsData.purchasePrice }} 元</span>
            </el-descriptions-item>
            <el-descriptions-item label="总价值">
              <span class="highlight-text">{{ goodsData.totalPrice }} 元</span>
            </el-descriptions-item>
            <el-descriptions-item label="供货商">
              <span class="highlight-text">{{ goodsData.supplier || '无' }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="仓库位置">
              <span class="highlight-text">{{ goodsData.location || '无' }}</span>
            </el-descriptions-item>
            <template v-if="goodsData.type === 3">
              <el-descriptions-item label="维修次数">
                <span class="highlight-text">{{ goodsData.repairCount || 0 }}</span>
              </el-descriptions-item>
              <el-descriptions-item label="保修期">
                <span class="highlight-text">
                  {{ goodsData.warrantyPeriod ? `${goodsData.warrantyPeriod}个月` : '无' }}
                </span>
              </el-descriptions-item>
            </template>
          </el-descriptions>
        </div>

        <!-- 系统信息区块 -->
        <div class="info-section">
          <div class="section-header">
            <el-icon><Clock /></el-icon>
            <h3>系统信息</h3>
          </div>
          <el-divider class="custom-divider" />
          <el-descriptions :column="2" border>
            <el-descriptions-item label="采购日期">
              <span class="time-text">{{ formatDateTime(goodsData.purchaseDate) }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="保质期">
              <span class="time-text">{{ formatDateTime(goodsData.expireDate) }}</span>
            </el-descriptions-item>
            <template v-if="goodsData.type === 3">
              <el-descriptions-item label="最后维修日期">
                <span class="time-text">{{ formatDateTime(goodsData.lastRepairDate) }}</span>
              </el-descriptions-item>
            </template>
            <el-descriptions-item label="创建时间">
              <span class="time-text">{{ formatDateTime(goodsData.createTime) }}</span>
            </el-descriptions-item>
            <el-descriptions-item label="更新时间">
              <span class="time-text">{{ formatDateTime(goodsData.updateTime) }}</span>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>
  </div>
</template>
  
  <script setup>
  import {useRoute,useRouter} from 'vue-router'
  import {onMounted,ref,reactive } from 'vue'
  import {findById} from '@/api/goodsInfo'
  import {findById as findByEmployeeId} from '@/api/employer'
  
  
  const route =useRoute()
  const router =useRouter()
  const managerName = ref('') // 用于存储管理员姓名
  onMounted(async () => {
  try {
    // 1. 获取物资详情
    const id = route.query.id
    const res = await findById(id)
    goodsData.value = res.data
    
    // 2. 获取管理员姓名（如果存在managerId）
    if (goodsData.value.managerId) {
      const employeeRes = await findByEmployeeId(goodsData.value.managerId)
      managerName.value = employeeRes.data.name || '未知'
    }
    console.log('smdadsa-> ',managerName.value)
  } catch (error) {
    console.error('获取数据失败:', error)
  }
})
  const goodsData =ref({})
  
  const handleBack=()=>{
      router.back()
  }
  // 获取数量单位的方法
const getQuantityUnit = (type) => {
  const unitMap = {
    1: 'kg',    // 食品
    2: '盒',    // 药品
    3: '台',    // 设备
    4: '件',    // 耗材
    5: '个'     // 其他
  };
  return unitMap[type] || '个'; // 默认返回"个"
};
  
  // 格式化日期时间
  const formatDateTime = (dateString) => {
    if (!dateString) return ''
    const date = new Date(dateString)
    return date.toLocaleString()
  }
  const typeMap = reactive({
  1: { label: '食品', tagType: 'success' },
  2: { label: '药品', tagType: 'danger' },
  3: { label: '设备', tagType: 'warning' },
  4: { label: '耗材', tagType: '' },
  5: { label: '其他', tagType: 'info' }
});
// 状态映射配置
const statusMap = reactive({
  1: { label: '可用', tagType: 'success', effect: 'light' },    // 浅绿色
  2: { label: '待维修', tagType: 'warning', effect: 'plain' },  // 黄色边框
  3: { label: '报废', tagType: 'danger', effect: 'dark' },      // 深红色
  4: { label: '库存不足', tagType: 'info', effect: 'light' }    // 浅蓝色
});
  
  </script>
  
  
  <style scoped>
  .material-detail-container {
    padding: 20px;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4edf9 100%);
    min-height: 100vh;
  }
  
  .detail-card {
    margin: 0 auto;
    max-width: 1200px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border: none;
  }
  
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: linear-gradient(120deg, #4a6bdf 0%, #3a56c4 100%);
  }
  
  .header-content {
    display: flex;
    align-items: center;
  }
  
  .header-title {
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: 600;
    color: white;
    margin: 0;
  }
  
  .title-icon {
    margin-right: 12px;
    font-size: 28px;
    color: #ffd04b;
  }
  
  .record-id {
    margin-left: 30px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
  }
  
  .back-button {
    height: 40px;
    padding: 0 20px;
    border-radius: 8px;
    font-weight: 500;
    color: white;
    border-color: white;
    background: transparent;
    transition: all 0.3s ease;
  }
  
  .back-button:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  
  .content-wrapper {
    padding: 30px;
    background: white;
  }
  
  .info-section {
    margin-bottom: 30px;
  }
  
  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .section-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #2c3e50;
    margin-left: 10px;
  }
  
  .section-header .el-icon {
    font-size: 22px;
    color: #4a6bdf;
  }
  
  .custom-divider {
    margin: 10px 0 20px;
    background-color: #f0f4f8;
  }
  
  /* 描述列表样式 */
  :deep(.el-descriptions__header) {
    display: none;
  }
  
  :deep(.el-descriptions__body) {
    background-color: transparent;
  }
  
  :deep(.el-descriptions__label) {
    width: 120px;
    font-weight: 500;
    color: #5a6d88;
    background-color: #f9fafc !important;
  }
  
  :deep(.el-descriptions__content) {
    font-weight: 500;
    color: #34495e;
  }
  
  /* 文本样式 */
  .highlight-text {
    font-weight: 600;
    color: #4a6bdf;
  }
  
  .time-text {
    color: #606266;
  }
  
  /* 标签样式 */
  .type-tag,
  .status-tag {
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 16px;
  }
  
  /* 响应式设计 */
  @media (max-width: 768px) {
    .card-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 16px;
    }
    
    .header-content {
      flex-direction: column;
      align-items: flex-start;
    }
    
    .record-id {
      margin: 10px 0 0;
    }
    
    :deep(.el-descriptions) {
      display: block;
    }
    
    :deep(.el-descriptions-item) {
      display: block;
      margin-bottom: 10px;
    }
    
    :deep(.el-descriptions__label) {
      display: inline-block;
      width: 100px;
      text-align: left;
    }
    
    :deep(.el-descriptions__content) {
      display: inline;
    }
  }
  </style>